<template>
  <view class="history-container">
    <view class="date-selector">
      <picker mode="date" :value="selectedDate" @change="onDateChange">
        <view class="date-picker">
          <uni-icons type="calendar" size="20" color="#1890ff" />
          <text>{{ selectedDate }}</text>
          <uni-icons type="down" size="16" color="#999" />
        </view>
      </picker>
    </view>

    <view class="daily-summary" v-if="dailyData">
      <view class="summary-item">
        <text class="summary-label">总热量</text>
        <text class="summary-value">{{ dailyData.totalCalories }}千卡</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">蛋白质</text>
        <text class="summary-value">{{ dailyData.protein }}g</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">脂肪</text>
        <text class="summary-value">{{ dailyData.fat }}g</text>
      </view>
      <view class="summary-item">
        <text class="summary-label">碳水</text>
        <text class="summary-value">{{ dailyData.carbs }}g</text>
      </view>
    </view>

    <view class="meal-records">
      <view class="meal-section" v-for="meal in mealRecords" :key="meal.type">
        <view class="meal-header">
          <uni-icons :type="meal.icon" size="20" :color="meal.color" />
          <text class="meal-title">{{ meal.name }}</text>
          <text class="meal-time">{{ meal.time }}</text>
        </view>
        
        <view class="dish-list" v-if="meal.dishes.length > 0">
          <view class="dish-item" v-for="dish in meal.dishes" :key="dish.id">
            <image :src="dish.image" class="dish-image" />
            <view class="dish-info">
              <text class="dish-name">{{ dish.name }}</text>
              <text class="dish-calories">{{ dish.calories }}千卡</text>
            </view>
            <view class="dish-rating">
              <uni-rate :value="dish.rating" :readonly="true" :size="12" />
            </view>
          </view>
        </view>
        
        <view class="empty-meal" v-else>
          <text>暂无用餐记录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '2024-01-15',
      dailyData: {
        totalCalories: 1580,
        protein: 65,
        fat: 45,
        carbs: 180
      },
      mealRecords: [
        {
          type: 'breakfast',
          name: '早餐',
          time: '07:30',
          icon: 'fire',
          color: '#ff9500',
          dishes: [
            {
              id: 1,
              name: '小米粥',
              image: '/static/images/dish1.jpg',
              calories: 120,
              rating: 4.5
            },
            {
              id: 2,
              name: '煎蛋',
              image: '/static/images/dish2.jpg',
              calories: 180,
              rating: 4.0
            }
          ]
        },
        {
          type: 'lunch',
          name: '午餐',
          time: '12:00',
          icon: 'star',
          color: '#52c41a',
          dishes: [
            {
              id: 3,
              name: '宫保鸡丁',
              image: '/static/images/dish3.jpg',
              calories: 320,
              rating: 4.8
            },
            {
              id: 4,
              name: '米饭',
              image: '/static/images/dish4.jpg',
              calories: 200,
              rating: 4.0
            }
          ]
        },
        {
          type: 'dinner',
          name: '晚餐',
          time: '18:30',
          icon: 'heart',
          color: '#1890ff',
          dishes: []
        }
      ]
    }
  },
  methods: {
    onDateChange(event) {
      this.selectedDate = event.detail.value
      this.loadDayData()
    },
    
    loadDayData() {
      // 模拟加载数据
      console.log('加载日期数据:', this.selectedDate)
    }
  }
}
</script>

<style lang="scss" scoped>
.history-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.date-selector {
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.date-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.daily-summary {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
}

.summary-item {
  text-align: center;
  flex: 1;
}

.summary-label {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.summary-value {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #1890ff;
}

.meal-section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.meal-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.meal-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-left: 10rpx;
  flex: 1;
}

.meal-time {
  font-size: 24rpx;
  color: #666;
}

.dish-item {
  display: flex;
  align-items: center;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f9f9f9;
  
  &:last-child {
    border-bottom: none;
  }
}

.dish-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 15rpx;
}

.dish-info {
  flex: 1;
}

.dish-name {
  font-size: 26rpx;
  color: #333;
  display: block;
  margin-bottom: 5rpx;
}

.dish-calories {
  font-size: 22rpx;
  color: #666;
}

.empty-meal {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 26rpx;
}
</style>